<template>
    <div class="main-header">

        <div class="menu-icon" @click="handleMenuInconClick">
            <el-icon size="28px">
                <component :is="isFold ? 'Expand' : 'Fold'"></component>
            </el-icon>
        </div>
        <div class="content">
            <div class="breadCrumb">面包屑</div>
            <header-info />
        </div>
    </div>
</template>

<script setup lang="ts">
import { emitChangeFn } from 'element-plus';
import { ref } from 'vue'
import headerInfo from './c-cpns/header-info.vue';
const isFold = ref(false)
const emit = defineEmits(['foldChange'])

function handleMenuInconClick() {
    isFold.value = !isFold.value
    // 将时间和状态传递给父组件
    emit('foldChange', isFold.value)
}



</script>

<style lang="less" scoped>
.main-header {
    display: flex;
    align-items: center;
    flex: 1;
    height: 100%;

    .menu-icon {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        padding: 0 18px;
    }
}
</style>